<template>
	<view>
		<swiper-tab-head :tabBars='tabBars' :tabIndex='tabIndex' @tabtap='tabtap' />
		<view class="uni-tab-bar">
			<swiper class="swiper-box" 
			:style="{height:swiperheight+'px'}" 
			:current="tabIndex"
			@change="tabChange" 
			duration="200">
				<swiper-item> 
					<scroll-view scroll-y class="list" @scrolltolower='lower' :scroll-top="scrollTop">
						<view v-if="commonList.length != 0">
							<LivingPay :list= 'commonList' @pay='pay' />
						</view>
						<view v-else>
							<view class="nothingImg">
								<image src="../../static/common/nothing.png" mode="aspectFill" style="width: 100%; height: 100%;"></image>
							</view>
							<view class="nothing">暂无数据</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower='lower' :scroll-top="scrollTop">
						<view v-if="tempList.length != 0">
							<LivingPay :list= 'tempList' @pay2='pay2' />
						</view>
						<view v-else>
							<view class="nothingImg">
								<image src="../../static/common/nothing.png" mode="aspectFill" style="width: 100%; height: 100%;"></image>
							</view>
							<view class="nothing">没有数据</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower='lower' :scroll-top="scrollTop">
						<view v-if="otherList.length != 0">
							<LivingPay :list= 'otherList' @pay3='pay3' />
						</view>
						<view v-else>
							<view class="nothingImg">
								<image src="../../static/common/noImg.png" mode="aspectFill" style="width: 100%; height: 100%;"></image>
							</view>
							<view class="nothing">没有数据</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>   
		</view>
	</view>
</template>

<script>
	import SwiperTabHead from '../../components/common/swiper_tab_head.vue'
	import LivingPay from '../../components/index/livingPay_item.vue'
import loginVue from '../login/login.vue';
	export default {
		components:{
			SwiperTabHead,
			LivingPay
		},
		data() {
			return {
				tabBars: [
					{'name': '常规收费','id':0},
					{'name': '临时收费','id':1},
					{'name': '其他收费','id':2}
				],
				tabIndex: 0,
				swiperheight: 500,
				commonList: [],//常规收费列表
				tempList: [],//临时收费列表
				otherList: [],//其他收费列表
				isLoadMore: false ,//是否加载中
				page: 1,
				scrollTop: 0,
				owner_info:{},
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res)=> {
					let height=res.windowHeight-uni.upx2px(100)
					this.swiperheight=height;
				}
			});
			this.getOwnerInfo();
			this.commonExpense();
			this.tempExpense();
			this.otherExpense();
			 // #ifdef APP-PLUS
			uni.loadFontFace({
				 family: 'DINPro-Medium',
				// 本地字体路径需转换为平台绝对路径
				source: `url(${plus.io.convertLocalFileSystemURL('_www/static/DINPro-Medium.ttf')})`,
				success() {
				},
				fail(e) {
				}
			})
			 // #endif
		},
		onPullDownRefresh() {
			this.commonExpense();
			this.tempExpense();
			this.otherExpense();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//获取业主信息
			getOwnerInfo(){
				let myInfo = uni.getStorageSync('myInfo')
				if(myInfo){
					let owner_info = uni.getStorageSync('owner_info')
					if(owner_info){
						this.owner_info = owner_info
					}else{
						uni.showModal({
							content:'未绑定业主信息，即将跳转绑定页面',
							
						})
						//跳转到绑定页面
						setTimeout(()=>{
							uni.navigateTo({
								url: './boundUSER'
							});
						},2000)
					}
				}else{
					this.goLogin()
				}
				
			},
			goLogin(){
				if (uni.getSystemInfoSync().platform == 'ios') {
						uni.showModal({
							title: '提示信息',
							content: '请先登录',
							confirmText: '去登录',
							cancelColor: "#262626",
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '../theLogin/index'
									})
								} else if (res.cancel) {}
							}
						})
					} else {
						uni.showModal({
							title: '提示信息',
							content: '请先登录',
							cancelText: '去登录',
							confirmText: '取消',
							confirmColor: "#262626",
							success(res) {
								if (res.confirm) {
										uni.navigateTo({
											url: '/pages/index/index'
										})
								} else if (res.cancel) {
									uni.navigateTo({
										url: '../theLogin/index'
									})
								}
							}
						})
					}
				
			},
			tabtap(index){
				this.tabIndex = index;
			},
			// 左右滑动事件
			tabChange(e){
				// console.log(e)
				this.tabIndex=e.detail.current;
			},
			pay(id) {
				console.log("点击了"+id)
				uni.navigateTo({
					url:'../pay_detail/common?id='+id
				})
			},
			pay2(id){
				console.log("点击了"+id)
				uni.navigateTo({
					url:'../pay_detail/regular?id='+id
				})
			},
			pay3(id){
				console.log("点击了"+id)
				uni.navigateTo({
					url:'../pay_detail/other?id='+id
				})
			},
			//常规收费
			commonExpense(){
					this.$request({
						url: '/admin/system/sysChargeDetail/getDetails',
						method: 'GET',
						data: {
							type:0
						}
					}).then((res)=>{
						console.log(res)
						if(res.code === 200 ){
							this.commonList=res.data
							if(res.data.length<this.commonList.length){
								this.isLoadMore=true
							}else{
								this.isLoadMore=false
							}
						}else{
							   this.isLoadMore=false
						}
					});
			},
			//临时收费
			tempExpense(){
				this.$request({
					url: '/admin/system/sysChargeDetail/getDetails',
					method: 'GET',
					data: {
						type:1
					}
				}).then((res)=>{
					console.log(res)
					if(res.code === 200 ){
						this.tempList=res.data
						if(res.data.length<this.tempList.length){
							this.isLoadMore=true
						}else{
							this.isLoadMore=false
						}
					}else{
						   this.isLoadMore=false
					}
				});
			},
			//水费
			otherExpense(){
				this.$request({
					url: '/admin/system/sysChargeDetail/getDetails',
					method: 'GET',
					data: {
						type:2
					}
				}).then((res)=>{
					console.log(res)
					if(res.code === 200 ){
						this.otherList=res.data
						if(res.data.length<this.otherList.length){
							this.isLoadMore=true
						}else{
							this.isLoadMore=false
						}
					}else{
						   this.isLoadMore=false
					}
				});
			},
			//滚动时触发事件
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop;
			},
		   //切换scroll-view事件
		   changeScrollView(){
				this.scrollTop=0;//回到最顶部
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-tab-bar {
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		.swiper-box {
		flex: 1;
		width: 100%;
		height: calc(100% - 100upx);
		}
		.list {
			width: 750upx;
			height: 100%;
		}
	}
	.nothing{
		color: #B3B3B3;
		width: 100%;
		height: 30rpx;
		text-align: center;
		padding: 20rpx 0;
	}
</style>